import React, { Component } from "react";
import { Modal, Tabs, Spin } from "antd";
import { connect } from "dva";
import { isPhone } from 'utils/comm';
import IframeWrapper from 'components/IframeWrapper';
import RecordForm from "./RecordForm";
// import NoticeLogTables from "./NoticeLogTables";
// import NodeLog from "./NodeLog";
import styles from "./RecordDetail.less";

const { TabPane } = Tabs;

@connect(({ FlowHandle = {}, loading }) => ({
  // noticeLog: FlowHandle.noticeLog,
  formLog: FlowHandle.formLog,
  // fieldData: FlowHandle.fieldData,
  // nodeLog: FlowHandle.nodeLog,
  loading,
}))
class RecordDetail extends Component {
  eventCount = 0;

  state = {
    fieldData: undefined,
  };

  componentDidUpdate(prevProps) {
    const { taskId } = this.props;
    if (prevProps.taskId !== taskId) {
      this.getData();
    }
  }

  setPhoneFormData = () => {
    const {
      formLog,
      // fieldData,
    } = this.props;

    const { fieldData } = this.state;
    this.eventCount += 1;
    if (this.eventCount === 2) {
      if (this.iframeRef && this.iframeRef.current) {
        this.iframeRef.current.contentWindow.postMessage({
          type: 'formConfig',
          data: fieldData,
          setting: {
            editable: false,
            formConfig: formLog,
          },
        });
      }
    }
  }

  getData = () => {
    const { dispatch, taskId } = this.props;
    dispatch({
      type: "FlowHandle/getNoticeLog",
      payload: { taskId },
    });
    dispatch({
      type: "FlowHandle/getNodeLog",
      payload: { taskId },
    });
    dispatch({
      type: "FlowHandle/getFormLog",
      payload: { taskId },
    }).then(({ datas })=> {
      const { fieldData } = datas || {};
      this.setState({ fieldData }, this.setPhoneFormData);
    });
  };

  handleCancle = () => {
    const { onCancel } = this.props;
    onCancel();
  };

  render() {
    const {
      formLog,
      // fieldData,
      // noticeLog,
      // nodeLog,
      visible,
      loading,
      // taskId,
    } = this.props;

    const { fieldData } = this.state;

    const modalLoading =
      loading.effects["FlowHandle/getNoticeLog"] ||
      loading.effects["FlowHandle/getNodeLog"] ||
      loading.effects["FlowHandle/getFormLog"] ||
      false;
    const renderPhone = isPhone();
    return (
      <Modal
        cancelButtonProps={{ type: "primary" }}
        cancelText="关闭"
        centered
        destroyOnClose
        onCancel={this.handleCancle}
        okButtonProps={{ style: { display: "none" } }}
        title={renderPhone ? "表单日志" : "流转详情"}
        visible={visible}
        width="812px"
        wrapClassName={styles.root}
      >
        <Spin spinning={modalLoading}>
          { renderPhone ? (
            <IframeWrapper
              autoFitHeight
              src="/flow-phone/form"
              style={{ height: 352}}
              iframeStyle={{ height: 352}}
              messageHandlers={[
                (msg) => {
                  if (msg.type === 'ready'){
                    this.setPhoneFormData();
                  }
                },
              ]}
              getFrameRef={ref => { this.iframeRef = ref; }}
            />
          ) : (
            <Tabs defaultActiveKey="1">
              <TabPane tab="表单日志" key="1">
                <div>
                  <RecordForm
                    formConfigData={formLog}
                    dataLoading={modalLoading}
                    fieldData={fieldData}
                  />
                </div>
              </TabPane>
              {/*
              <TabPane tab="通知日志" key="2">
                <NoticeLogTables noticeLog={noticeLog} taskId={taskId} />
              </TabPane>
              <TabPane tab="节点日志" key="3">
                <NodeLog nodeLog={nodeLog} />
              </TabPane>
              */}
            </Tabs>
          )}
        </Spin>
      </Modal>
    );
  }
}

export default RecordDetail;
